import React, {Component} from 'react';
import {Card, Avatar, Image, Col, Row, message} from 'antd';
import './user.less';
import {reqUserDetail} from "../../api/user";
import store from 'store';
import Fmale from '../../assets/fmale.svg';
import Male from '../../assets/male.svg';
import Gender from '../../assets/gender.svg';
import MiniP from '../../assets/minip.jpg';
import ChangePwd from '../../components/changePwdForm';

const tabListNoTitle = [
  {
    key: 'account',
    tab: '修改账号信息',
  },
  {
    key: 'other',
    tab: '其他',
  },
];

// 用户个人中心
export default class UserCenter extends Component {
  state = {
    userInfo: {},
    noTitleKey: 'account',
  }
  contentListNoTitle = {
    account: <ChangePwd/>,
    other: <p>app content</p>,
  };
  getUser = async () => {
    try {
      const user = store.get('user');
      if (user) {
        const {data: userInfo} = await reqUserDetail(user.uid, {fields: 'country,language,province,role'});
        this.setState({userInfo: userInfo});
      }
    } catch (e) {
      message.error(e.data.name || e.data.message);
    }
  }
  // 切换tab
  onTabChange = (noTitleKey) => {
    this.setState({ noTitleKey });
  }

  componentDidMount() {
    this.getUser();
  }

  render() {
    const {userInfo, noTitleKey} = this.state;

    return (
      <Card>
        {/*<div className='card-container'>*/}
        {/*</div>*/}
        <Row gutter={16}>
          <Col xs={{ span: 24 }} lg={{ span: 7 }}>
            <Card className='card-box'>
              <div className='user-profile'>
                <div className='user-avatar-wrapper'>
                  <Avatar src={userInfo.avatarUrl} size={80}/>
                  <img src={userInfo.gender === 0 ? Gender : userInfo.gender === 1 ? Male : Fmale} alt='' className='user-avatar'/>
                </div>
                <h3>{userInfo.nickName}</h3>
                <p>{userInfo.role}</p>
                <p>{userInfo.country} {userInfo.province}</p>
              </div>
              <div className='user-other-info'>
                <h3 style={{borderBottom: '1px solid #dfe6ec', paddingBottom: '5px', fontSize: 16}}>主要技能</h3>
                <p>
                  熟悉语言：Python,JavaScript <br/>
                  熟悉框架：Django,Scrapy,Koa,Vue,React<br/>
                  了解Flask，Tornado<br/>
                  熟练开发小程序<br/>
                  熟悉数据库: MySql, Redis, MongoDB
                </p>
                <h3 style={{borderBottom: '1px solid #dfe6ec', paddingBottom: '5px', fontSize: 16}}>作品地址</h3>
                <div>
                  个人网站: <a href='https://huyu.info' rel="noreferrer" target='_blank'>https://huyu.info</a> <br/>
                  资讯后台: <a href='http://119.45.228.148/admin/login/' target='_blank' rel="noreferrer">
                  http://119.45.228.148/admin/login/
                </a> <br/>
                  小程序: <br/>
                  <div style={{textAlign: 'center'}}>
                    <Image src={MiniP} width={100}/>
                  </div>
                  ...
                </div>
              </div>
            </Card>
          </Col>
          <Col xs={{ span: 24 }} lg={{ span: 17}}>
            <Card className='card-box card-box2'
                  style={{width: '100%'}}
                  tabList={tabListNoTitle}
                  activeTabKey={noTitleKey}
                  onTabChange={key => {
                    this.onTabChange(key, );
                  }}
            >
              {this.contentListNoTitle[noTitleKey]}
            </Card>
          </Col>
        </Row>
      </Card>
    )
  }
}
